<template>
  <div class="tabBar">
    <el-menu :default-active="'' + activeIndex" class="elTab" mode="horizontal">
      <el-menu-item :index="'' + index" v-for="(item, index) in tabList" :key="item">{{ item }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts" name="TabBar">
defineProps<{ activeIndex: number; tabList: string[] }>();
</script>

<style scoped lang="scss">
.tabBar {
  width: 100%;
  .elTab {
    width: 100%;
  }
}
.el-menu--horizontal {
  border-bottom: 0;
  .el-menu-item {
    width: 90px;
    height: 40px;
    padding: 0;
    margin-right: 10px;
    line-height: 40px;
    background: #bdbdbd;
    border-radius: 4px 4px 0 0;
  }
  .is-active {
    background: #f5f5f5;
    border-bottom: 1px solid transparent;
    border-radius: 4px 4px 0 0;
  }
  .el-menu-item:not(.is-disabled):focus,
  .el-menu-item:not(.is-disabled):hover {
    background: #f5f5f5;
  }
}
</style>
